<template>
  <div>
    <!-- 面包屑 -->
       <!--  面包屑-->
  <el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>权限管理</el-breadcrumb-item>
  <el-breadcrumb-item>权限列表</el-breadcrumb-item>
</el-breadcrumb>
<!-- 卡片视图 -->
   <el-card>
     <el-table
        border 
        stripe 
       :data="rightsList"
       style="width: 100%">
       <el-table-column
          type="index"
         label="#">
       </el-table-column>
           <el-table-column
         label="权限名称"
          prop="autName">
       </el-table-column>
             <el-table-column
         label="路径"
          prop="path">
       </el-table-column>
             <el-table-column
         label="权限等级"
          prop="level">
          <template slot-scope="scope">
          <el-tag  v-if="scope.row.level===0"> </el-tag>
          <el-tag type="success" v-else-if="scope.row.level===1"></el-tag>
          <el-tag type="warning" v-else-if="scope.row.level===2"></el-tag>
          </template>
       </el-table-column>
     </el-table>
   </el-card>
  </div>
</template>

<script>
export default {
data() {
  return {
  rightsList:[]  
  }
},created() {
  this.getRightList()
},
methods: {
  async getRightList(){
    const {data:res}= await this.$http.get('right/list')
    if(res.meta.status!==200) return this.$message.error('获取失败')
       this.rightsList =res.data
  }
},
}
</script>
<style lang="less" scoped>

</style>